<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
    <!-- 引入react核心库 -->
    <script src="../../../../node_modules/react/umd/react.development.js"></script>
    <!-- 2. 引入react-dom 用于支持react操作dom -->
    <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../../../../node_modules/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="div"></div>
</body>
<script type="text/babel">
    /* 
        jsx语法规则
        1.定义虚拟DOM时，不要写引号
        2.标签中混入JS表达式时要用{}
        3.样式的类名指定不要用class ，要用className
        4.只允许有一个根节点(3种解决办法 1.用一个div标签包裹 2.<></> 3.React.Fragment标签)
            4.1 第一种会生成多余的标签解构 后两种不会在浏览器中生成多余的标签
            4.2 推荐使用<></>
        5.内联样式，要用style={{key：value}}的形式去写
        6.标签必须闭合
        7.标签首字母
            7.1 若小写字母开头，则将该标签换位htm中同名元素，若htm中无该标签对应的同名元素，则报错
            7.2 若大写字母开头，react就去演染对应的组件，若组件没有定义，则报错
        8.注释 需要在{} 中写
        9.false,null,undefined,and true 是合法的子元素，并不会被渲染，直接忽略

    */
            // 使用JSX创建React元素
    let aa = 100
        {
         // 不被浏览器识别的标签首字母小写-报错
         // <myTable>MyTable</myTable>
         }
        {/* 
        // 不被浏览器识别首字母大写-报错
        <MyTable>MyTable</MyTable>
        */ }
    let a = 921
    let mag = 'hello React'
    let arr = [1,2,3]
    let obj = {
        name:'ljl',
        age:17
    }
    let isShow = true
    let switcha = null
    let switchb = undefined
    let con = <p>这是一个用jsx语法写的段落</p>
    let all1 = <React.Fragment>
        <div>
            <h2>中奖名单</h2>
            <ul>
                <li>1</li>
                <li className='aa'>2</li>
                {/* 
                     <li style={{color:"blue",fontSize:22}}>a:{aa}</li>
                */
                }
            </ul>
            <h2>表达式</h2>
            <ul>
                <li>a:{a}</li>
                <li>a+aa:{a+aa}</li>
                <li>mag:{mag}</li>
                <li>arr-map:{arr.map(item => item+1)}</li>
                <li>obj:{obj.name}</li>
                <li>{con}</li>
                <li>isShow:{isShow ? 1 : 2}</li>
                <li>null:{switcha}</li>
                <li>undefined:{switchb}</li>
            </ul>
            <h3>语句</h3>
            <p>
                {
                    "(1).if(){}"
                }
            </p>
        </div>
        <div>kkkk</div>
    </React.Fragment>
    // 创建根节点
    let root = ReactDOM.createRoot(document.getElementById('div'))
    // 渲染到页面中
    root.render(all1)
</script>
</html>